//
var gulp = require('gulp');
var less = require('gulp-less'); //less编译
var concat = require('gulp-concat'); //CSS 合并
var cleanCss = require('gulp-clean-css'); //css压缩
var del = require('del'); //删除文件/文件夹
var babel = require('gulp-babel'); //ECMA6 -> ECMA5
var uglify = require('gulp-uglify'); //压缩js
var rename= require('gulp-rename');//文件改名
var imagemin = require('gulp-imagemin');//图片压缩

/*
    //----------------------------
    站点目录说明：
        开发环境                src    文件夹
        生产环境                build  文件夹
        Gulp 环境搭建           npm install --save-dev gulp   
        //npm install XXX --save-dev 其中 --save-dev 即保存配置信息到package.json中的devDependencies节点中

    //----------------------------
    开发环境向生产模式输出
        1、  清空（删除文件夹）             del
        2、  复制文件                     src -> dest
        3、  less 文件编译                gulp-less
        4、  css合并                     gulp-concat
        5、  css压缩                     gulp-clean-css
        6、  js ECMA5 -> ECMA6           gulp-babel babel-preset-es2015
        7、  js合并                       同css合并 用 gulp-concat
        8、  js压缩                       gulp-uglify 
        9、  图片压缩                      gulp-imagemin
        10、文件改名                       gulp-rename
        11、 雪碧图？
        12、 base64
    //-------------------------------

    浏览器（服务器）同步
        建立服务器
        浏览器实时刷新

    //-------------------------------

*/

//task API 说明
/*
    第一个参数 表示 执行任务的名称
    第二个参数 表示依赖执行的任务名称
    第三个参数 表示回调方法即任务中执行的内容
*/
/*////命令行 输入gulp 直接默认执行
gulp.task('default',function(){
    console.log('默认执行');
});*/

// //执行顺序 task2 -> task1 -> default
// gulp.task('default',['task1'],function(){
//     //执行默认任务
//     console.log('我是default');    
// });

// gulp.task('task1',['task2'],function(){
//     console.log('我是task1');
// });
// gulp.task('task2',function(){
//     console.log('我是task2');
// });

//src API 说明

/*
    src 接口 提供将 符合匹配模式的文件读取到内存中
    pipe 管道（流）
    dest 接口 提供将读出的文件（流）写入指定文件目录下
*/
gulp.task('default', function () {
    //src 
    gulp.src('./src/**/*') //Input 读取操作
        .pipe(gulp.dest('./build/')); //pipe方法相当于下一步的意思//dest 方法则是输出，写入ouput操作
});

/*
    whatch 接收两个参数 第一个参数 即要监测的目录/文件 
    第二个参数可以是 数组中依次放的 任务名称  或者 是一个方法
*/
gulp.task('watchfile', function () {
    // gulp.watch('./src/index.html', ['task1', 'task2']);
    gulp.watch('./src/index.html', function () {
        console.log('文件发生了变化');
    });
});

// gulp.task('task1', function () {
//     console.log('task1');
// });
// gulp.task('task2', function () {
//     console.log('task2');
// });

//使用 命令进行文件编译 

//编译less 需要引入 gulp-less
/*
    使用命令 npm install --save-dev gulp-less 安装插件
    在此处 引用less模块 require(‘gulp-less’)
    可在Npm 官网查询 gulp-less的用法
*/

gulp.task('delTask', function () {
    del([
        './src/css/*.css',
        './build'
    ]);
});

gulp.task('lessTask', function () {
    //读出less下的所有文件
    gulp.src('./src/less/*')
        .pipe(less())
        .pipe(gulp.dest('./dist/css/'));
});

gulp.task('concatTask', function () {
    gulp.src('./src/css/*.css')
        //all合并后的文件名
        .pipe(concat('all.css'))
        .pipe(cleanCss()) //压缩
        .pipe(gulp.dest('./dist/css'));
});

/*
    js操作
    ECMA6 -> ECMA5
*/

gulp.task('jsTask', function () {
    gulp.src('./src/js/*.js')
        //ECMA5 -> ECMA6
        .pipe(babel({
            presets: ['es2015']
        }))
        //js 文件合并同css
        .pipe(concat('all.js'))
        //js压缩
        .pipe(uglify())
        //改名    //此处的 ./ 是相对于压缩文件all的路径
        .pipe(rename('./all.min.js'))
        .pipe(gulp.dest('./dist/js'));
});


/*
    图片压缩 gulp-imagemin
*/

gulp.task('imageTask',function(){
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'))
});